<template>
  <div class="classification">
    <!-- 搜索框 -->
    <van-search
      shape="round"
      background="#fff"
      @click-input="goSearch"
      placeholder="请输入搜索关键词"
    />

    <div class="center">
      <van-sidebar v-model="active">
        <van-sidebar-item
          v-for="item in classInfo.categoryList"
          ::key="item.id"
          :title="item.name"
          @click="change(item.id)"
        />
      </van-sidebar>
      <div class="right">
        <div class="top">
          <img :src="topInfo.banner_url" alt="" />
          <p>{{ topInfo.front_desc }}</p>
        </div>
        <h4>———— {{ topInfo.name }} ————</h4>
        <van-grid :column-num="3" :border="false">
          <van-grid-item v-for="item in topInfo.subCategoryList">
            <img :src="item.banner_url" alt="" />
            <span>{{ item.name }}</span>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getCatalogList, getCatalogcurrent } from "../server/catalog.js";
import { useRouter } from "vue-router";
const router = useRouter();
let topInfo = ref({});
let active = ref(0);
let classInfo = ref([]);
// 搜索框跳转搜索页
function goSearch() {
  router.push("/search");
}
// 获取分类数据
onMounted(() => {
  getCatalogList().then((res) => {
    classInfo.value = res.data;
  });
  change(1005000);
});
function change(id) {
  getCatalogcurrent(id).then((res) => {
    topInfo.value = res.data.currentCategory;
  });
}
</script>

<style scoped>
.classification {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.center {
  width: 100%;
  height: calc(100% - 6.5625rem);
  overflow-y: auto;
  display: flex;
}
.right {
  flex: 1;
}
.right > .top {
  width: 98%;
  box-shadow: 0 0 5px #000;
  border-radius: 10px;
  overflow: hidden;
  height: 8.75rem;
  margin: 0.625rem auto 0;
  position: relative;
}
.right > h4 {
  text-align: center;
}
.right > .top > img {
  height: 100%;
  width: 100%;
}
.right > .top > p {
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 /0.2);
  margin-top: 0;
  text-align: center;
  line-height: 8.75rem;
}
.van-sidebar {
  background-color: #f7f8fa;
}
.van-grid {
  margin-top: 0.625rem;
}
.van-grid img {
  width: 1.75rem;
  height: 1.75rem;
}
.van-grid span {
  font-size: 0.75rem;
}
</style>
